<!--复选框-->
<template>
  <div class="example">

    <div class="mb20 tableClass">
      <table cellspacing="0">
        <tr>
          <th>1) 调用文件组件</th>
        </tr>
        <tr>
          <td><pre>{{explameCall}}</pre></td>
        </tr>
        <tr>
          <th>2) 写入到methods方法</th>
        </tr>
        <tr>
          <td><pre>{{explameMethods}}</pre></td>
        </tr>
      </table>
    </div>

    <zz-paginate :pageSize=2></zz-paginate>

  </div>
</template>

<script>

  export default {
    name: '',
    data () {
      return {
        explameCall: `<zz-paginate
          :padding="[20, 20, 0, 20]"  边距
          :simple="false"  是否开启简单模式
          :pageSize="10" 默认显示条数
          :goBtn="true" 是否显示跳到下一页
          :isTotalItem="true" 是否显示总页数
          @choose="query" 选择页数后回调事件
          ></zz-paginate>`,

        explameMethods:
          `query (state) {
        this.state = state
      }`
      }
    },
    methods: {
      query (state) {
        this.state = state
      }
    }
  }
</script>
<style lang="scss" scoped>
  .example{
    padding: 20px;
    .example-left{
      float: left;
      width: 20%;
    }
    .example-right{
      float: right;
      width: 78%;
      background: #fff;
      padding: 20px;
    }
  }
</style>
